<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加删除记录练习</title>
</head>

<body>

    <table id="employeeTable" border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="#">Delete</a></td>
        </tr>

    </table>

    <div id="formDiv">

        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
          Submit
        </button>
                </td>
            </tr>
        </table>
    </div>

    <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $("#addEmpButton").click(function() {
            let $nameVal = $("#empName").val();
            let $emailVal = $("#email").val();
            let $salaryVal = $("#salary").val();

            $("#employeeTable>tbody").append(`<tr>
            <td>${$nameVal}</td>
            <td>${$emailVal}</td>
            <td>${$salaryVal}</td>
            <td><a href="#">Delete</a></td>
        </tr>`)
        })

        $("#employeeTable").on("click", "a", function() {
            console.log($(this).parent().parent())
            $(this).parent().parent().remove()
        })
    </script>
</body>

</html>